<template>
	<view class="register-container">
		<view class="custom-nav">
			<view class="back-btn" @click="goBack">
				<image src="/static/icons/back.png" class="back-icon" />
			</view>
			<text class="nav-title">用户注册</text>
		</view>

		<view class="form-box">
			<input v-model="phone" placeholder="手机号" class="input-item" type="number" />
			<input v-model="code" placeholder="验证码" class="input-item code-input" />
			<input v-model="password" placeholder="设置密码（6-20位）" class="input-item" type="password" />

			<button class="submit-btn" :style="{backgroundColor: '#9BBFE0'}" @click="handleRegister">
				立即注册
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				password: ''
			}
		},
		methods: {
			async handleRegister() {
			  // 客户端验证（减少无效请求）
			  if (!/^1[3-9]\d{9}$/.test(this.phone)) {
			    uni.showToast({ title: '手机号格式错误', icon: 'none' });
			    return;
			  }
			  if (this.password.length < 6) {
			    uni.showToast({ title: '密码至少6位', icon: 'none' });
			    return;
			  }
			
			  // 显示加载状态
			  uni.showLoading({ title: '注册中...' });
			  
			  try {
			    const res = await uni.request({
			      url: 'http://localhost:5000/api/auth/register',
			      method: 'POST',
			      data: { phone: this.phone, password: this.password }
			    });
			
			    uni.hideLoading();
			    
			    if (res.data.success) {
			      uni.showToast({ title: '注册成功，请登录' });
			      setTimeout(() => uni.navigateBack(), 1500);
			    } else {
			      uni.showToast({ title: res.data.msg, icon: 'none' });
			    }
			  } catch (err) {
			    uni.hideLoading();
			    uni.showToast({ title: '网络请求失败', icon: 'none' });
			  }
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	/* 复用登录页样式 */
	/* 使用scoped避免样式污染 */
	.login-container {
		background-color: #FDF5E7;
		height: 100vh;
	}

	.custom-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		color: #9BBFE0;
		font-size: 36rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.form-box {
		padding: 60rpx 80rpx;
	}

	.input-item {
		height: 100rpx;
		background: white;
		margin-bottom: 40rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(155, 191, 224, 0.2);
	}

	.login-btn {
		height: 100rpx;
		line-height: 100rpx;
		color: white;
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		letter-spacing: 4rpx;
	}

	.register-container {
		background-color: #FDF5E7;
		height: 100vh;
	}

	.form-box {
		padding: 60rpx 80rpx;
	}

	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		color: white;
		margin-top: 80rpx;
	}
</style>